// web/src/app/(employee)/employee/[id]/_components/employee-content.tsx
import React from 'react';
import {Employee} from "@/lib/employee/type";
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import {Badge} from "@/components/ui/badge";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {Separator} from "@/components/ui/separator";
import {VeganIcon} from "lucide-react";
import Preview from "@/components/learn/preview";
import {Hr} from '@prisma/client';
import {Button} from "@/components/ui/button";
import Link from "next/link";
import {currentUser} from "@/lib/auth";

interface Props {
    employee: Employee & {
        hr: Hr
    };
}

const EmployeeContent = async ({employee}: Props) => {
    const user = await currentUser()

    return (
        <div className={`m-4`}>
            <Card>
                <CardHeader>
                    <CardTitle>
                        <span className={`text-lg`}>职位描述</span>
                        <div className={`flex flex-row items-center gap-x-1`}>
                            {employee.tags.length !== 0 && employee.tags.map(tag => (
                                <Badge variant={'success'}>{tag.name}</Badge>
                            ))}
                        </div>
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <CardDescription>
                        <Preview value={employee.description!}/>
                    </CardDescription>
                </CardContent>
                <div className={`flex justify-center`}>
                    <Separator className={`w-[90%] my-8`}/>
                </div>
                {/*hr信息*/}
                <CardFooter className={`flex items-center space-x-2`}>
                    <Avatar className={`size-14 rounded-full`}>
                        <AvatarImage className={`rounded-full`} src={employee.hr.image}/>
                        <AvatarFallback className={`bg-blue-400 text-white rounded-full`}>
                            {employee.hr?.username.charAt(0).toUpperCase()}
                        </AvatarFallback>
                    </Avatar>
                    <div className={`flex-1 flex flex-row items-center justify-between`}>
                        <div className={`flex flex-col gap-y-1`}>
                            <span className={`text-xl font-semibold`}>
                                {employee.hr?.username}
                            </span>
                            <span className={`text-sm`}>
                                {employee.company.name}
                            </span>
                        </div>
                        {/*@ts-ignore*/}
                        <Link href={
                            // meet-id为职位id-hr_id-当前用户id, role: user|hr
                            // @ts-ignore
                            // `/meet/employee/${employee?.id!}-${employee.hr.id}-${user?.id!}?role=user`
                            `/meet/employee/${employee?.id!}*malred*${employee.hr.id}*malred*${user?.id!}?role=user`
                        }
                              className={`p-2 bg-green-500 text-white rounded-md`}>
                            立即沟通
                        </Link>
                    </div>
                </CardFooter>
            </Card>
        </div>
    );
};

export default EmployeeContent;